<template>
    <el-button type="primary" plain @click="all">查询所有</el-button>
    <el-button type="primary" plain @click="nostart">未开始</el-button>
    <el-button type="success" plain @click="nofinish">进行中</el-button>
    <el-button type="warning" plain @click="finish">已完成</el-button>
  <el-table :data="detail.list" style="width: 100%">
    <el-table-column type="index" label="序号"></el-table-column>
    <el-table-column prop="id" v-if="false" />
    <el-table-column prop="name" label="计划名" />
    <el-table-column prop="planCommunityName" label="所属社区" />
    <el-table-column prop="startTime" label="开始时间" />
    <el-table-column prop="endTime" type="date" label="完成时间" />
    <el-table-column prop="status" label="完成情况" />
    <el-table-column prop="planManName" label="负责人" />
  </el-table>
  <el-pagination v-if="this.detail.total > 5"
    v-model:currentPage="detail.pageNum"
    v-model:page-size="detail.pageSize"
    :total="detail.total"
    :page-sizes="[5, 10]"
    :small="small"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  ></el-pagination>
  <el-button type="primary" plain @click="myecharts">显示图表</el-button>
  <el-dialog v-model="dialogFormVisible" title="显示图表">
    <Echarts :list = this.detail.list></Echarts>
  </el-dialog>

</template>

<script>
import Echarts from "../../main/echarts.vue";
export default {
    name: "plan",
    data() {
        return {
            detail: [
                {
                    list: [],
                    total: 0,
                    pageNum: 0,
                    pageSize: 0,
                },
            ],
            user: {},
            planModel: {},
            dialogFormVisible: false
        };
    },
    methods: {
        handleSizeChange(size) {
            this.detail.pageSize = size;
            this.mount();
        },
        handleCurrentChange(num) {
            this.pageNum = num;
            this.mount();
        },
        mount() {
            this.$axios({
                method: "post",
                url: "http://localhost:8080//nav/admin/projectone",
                data: this.$qs.stringify(this.planModel) +
                    "&" +
                    this.$qs.stringify({
                        pageSize: this.detail.pageSize,
                        pageNum: this.detail.pageNum,
                    }),
            }).then((res) => {
                console.log(res.data);
                this.project2 = res.data;
                if (res.data.code == 1) {
                    this.detail.list = res.data.data.list;
                    this.detail.pageSize = res.data.data.pageSize;
                    this.detail.pageNum = res.data.data.pageNum;
                    this.detail.total = res.data.data.total;
                }
                else {
                    console.log("error");
                }
            });
        },
        nostart() {
            this.planModel.status = "未开始";
            this.mount();
        },
        nofinish() {
            this.planModel.status = "进行中";
            this.mount();
        },
        finish() {
            this.planModel.status = "已完成";
            this.mount();
        },
        all() {
            this.planModel.status = "";
            this.mount();
        },
        myecharts(){
          this.dialogFormVisible = true;
        }
    },
    mounted() {
        this.user = this.$store.state.user;
        this.mount();
    },
    components: { Echarts }
};
</script>

<style scoped>
</style>